<template>
  <e-input-number-range class="input-money-range" v-bind="$props" :value="myValue" :min="myMin" :max="myMax" :bit="bit" @change="handleChange"/>
</template>

<script>
  import {InputNumber} from '@element-ui'
  import EInputNumberRange from './InputNumberRange'
  export default {
    componentName: 'EInputMoneyRange',
    components: {
      EInputNumberRange
    },
    props: {
      ...InputNumber.props,
      value: {
        type: Array,
        default: [0, 0]
      },
      bit: {
        type: Number,
        default: 0.01
      },
      max: {
        type: Number,
        default: 9999900
      },
      min: {
        type: Number,
        default: 0
      },
      validateEvent: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      value (value) {
        let myValue = [value[0] / 100, value[1] / 100]
        if (myValue[0] < this.myMin) {
          myValue[0] = this.myMin
        }
        if (myValue[0] > this.myMax) {
          myValue[0] = this.myMax
        }
        if (myValue[1] < this.myMin) {
          myValue[1] = this.myMin
        }
        if (myValue[1] > this.myMax) {
          myValue[1] = this.myMax
        }
        this.myValue = myValue
      },
      min (value) {
        let val = value / 100
        val = val <= this.myMax ? val : this.myMax
        this.myMin = val
      },
      max (value) {
        let val = value / 100
        val = val > this.myMin ? val : this.myMin
        this.myMax = val
      }
    },
    data () {
      return {
        myMax: this.max ? this.max / 100 : this.max,
        myMin: this.min ? this.min / 100 : this.min,
        myValue: [this.value[0] / 100, this.value[1] / 100]
      }
    },
    methods: {
      handleChange (value) {
        value = [Math.round(value[0] * 100), Math.round(value[1] * 100)]
        this.$emit('input', value).$emit('change', value).$emit('blur', value)
      }
    }
  }
</script>
